<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商品评价</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
  <link rel="stylesheet" href="../layui/font/iconfont.woff">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .clear::after {
      content: "";
      display: block;
      clear: both;
    }

    #show {
      width: 95%;
      padding: 0 2.5% 2.5% 2.5%;
      background-color: rgb(240, 244, 246);
    }

    #tubiaofont {
      height: 60px;
      background-color: rgb(240, 244, 246);
    }

    #tubiaofont span {
      display: inline-block;
      height: 60px;
      line-height: 60px;
      color: gray;
    }

    #tabdiv {
      width: 100%;
      background-color: white;
      overflow: hidden;
    }

    #tabdiv>p {
      width: 100%;
      padding: 20px 0;
      background-color: rgb(236, 239, 241);
    }

    #tabdiv>table {
      width: 100%;
      text-align: center;
    }

    #addbtn,
    #addbtnpj {
      margin: 1%;
    }

    tr {
      border: 1px solid gainsboro;
      height: 50px;
    }

    #DIB5 {
      padding: 5px 0;
    }

    #DIB,
    #DIB2,
    #DIB3,
    #DIB4,
    #DIB5 {
      width: 90px !important;
      border: 1px solid gray;
      background-color: rgba(1, 1, 1, 0);

      margin-bottom: 10px;
      margin-top: 10px !important;
      margin-left: 10px;
      border-radius: 2px;
      cursor: pointer;
    }

    #DIB5 {
      margin-bottom: 6px;
    }

    #DIB3,
    #DIB4 {
      background-color: #EFEFEF;
    }

    #type_page1 button {
      /* position: absolute; */
      width: 40px;
      height: 30px;
      line-height: 26px;
      margin: 0 5px;
      /* background-color: #EFEFEF; */
      border-style: none;
      cursor: pointer;
    }

    #type_page1 {
      /* position: relative; */
      float: right;
    }

    #tanchukuang {
      width: 95%;
      padding: 0 2.5% 2.5% 2.5%;
      background-color: rgb(240, 244, 246);
    }

    .layui-icon-home {
      color: blue !important;
      font-size: 18px !important;
    }

    #tubiaofont {
      height: 60px;
      background-color: rgb(240, 244, 246);
    }

    #tubiaofont span:not(:first-of-type) {
      display: inline-block;
      height: 60px;
      line-height: 60px;
      color: gray;
      font-size: 15px !important;
    }

    #popup_box {
      width: 100%;
      background-color: white;
      padding-bottom: 20px;
      overflow: hidden;
    }

    #popup_box>p {
      padding: 14px 0;
      width: 100%;
      padding: 20px 0;
      background-color: rgb(236, 239, 241);
    }

    #popup_box>p>span {
      display: inline-block;
      width: 100px;
      border: 1px solid gray;
      background-color: white;
      padding: 5px 0;
      text-align: center;
      margin-left: 70%;
      border-radius: 2px;
    }

    #popup_box>div {
      width: 40%;
      margin: 0 auto;
      padding: 30px 0;
    }

    #popup_box>div>div {
      margin-bottom: 40px;
    }

    #popup_box>div input {
      display: inline-block;
      width: 200px;
      padding: 5px;
    }

    #popup_box>div>div>span {
      display: inline-block;
      width: 60px;
    }

    #tijiao {
      margin-left: 45%;
    }

    #chongzhi {
      border: 1px solid black;
      box-sizing: border-box;
    }

    #addbtn,
    #addbtnpj {
      float: right;
      margin-right: 7.5%;
    }

    #date-1,
    #date-2,
    #zxun-1,
    #zxun-2 {
      float: left;

      width: 16%;
      height: 40px;
      margin-top: 15px;
    }

    .spans {
      margin-left: 1%;
      margin-top: 15px;
      float: left;
      height: 40px;
      line-height: 40px;
    }

    .cyan {
      background-color: rgb(0, 150, 136);
    }

    .layccpj {
      background-color: coral;
    }
  </style>
</head>

<body>
  <!-- 界面 -->
  <div id="show">
    <div id="tubiaofont">
      <span class="layui-icon layui-icon-home"></span>
      <span>&gt;&gt;</span>
      <span>商品</span>
      <span>&gt;&gt;</span>
      <span>商品评价</span>
    </div>
    <div id="tabdiv">
      <p>订单列表</p>
      <table id="tablea" class="clear">
        <!-- 表格的总宽度以定，高度以定，根据自己的表格的具体内容进行排版 -->
        <span class="spans">咨询人：</span><input type="text" class="layui-input" id="zxun-1">
        <span class="spans">咨询商品：</span><input type="text" class="layui-input" id="zxun-2">
        <span class="spans">咨询时间：</span><input type="text" class="layui-input" id="date-1">
        <span class="spans">--</span><input type="text" class="layui-input" id="date-2">
        <button id="addbtnpj" type="button" class="layui-btn">查询</button><!-- 按钮的样式 -->

        <thead>
          <tr>
            <th><input id="checkAll" type="checkbox"></th>
            <th>ID</th>
            <th>评价时间</th>
            <th>评价商品</th>
            <th>评价人</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="tbody-2">

        </tbody>
      </table>
      <!-- <button id="DIB">保存排序</button> -->
      <button id="DIB5">批量删除</button>
      <div id="type_page1"></div><!-- 生成分页 -->
    </div>
  </div>
  <!-- 小一点的按钮的样式 -->
  <!-- <button class="layui-btn layui-btn-sm">查询</button> -->


  <script src="../js/jQuery.3.6.0-uncompress.js"></script>
  <script src="../layui/layui.js"></script>
  <script src="../js/database.js"></script>
  <script src="../js/fenyegoods.js"></script>
  <script src="../js/goods.js"></script>

  <script type="text/javascript">
    layui.use('laydate', function () {
      let laydate = layui.laydate;
      //执行一个laydate实例
      laydate.render({
        elem: '#date-1' //指定元素
      });
    });
    layui.use('laydate', function () {
      let laydate = layui.laydate;
      //执行一个laydate实例
      laydate.render({
        elem: '#date-2'//指定元素
      });
    });
  </script>
</body>

</html>